<template>
	<view style="padding-left: 60rpx;">
		<!-- <view class="d-flex-yCenter-sb ">
			<text>￥{{leftmoney}}</text>
			<text>￥{{rightmoney}}</text>
		</view> -->
		<view class="d-flex-yCenter-sb ">
			<text>最低价格</text>
			<text>最高价格</text>
		</view>
		<view class="d-flex-yCenter-sb input mt-20">
			<!-- <SliderRange :format="format" :value=[0,9999] :max='9999' blockColor='#FF890B' backgroundColor='#D0D0D0'
				activeColor='#FF890B' :barHeight='3' :height='30' :tipVisible='fasle' @change="handleRangeChange">
			</SliderRange> -->
			<input type="number" v-model.number="leftmoney" @input="handleRangeChange"/>
			<input type="number" v-model.number="rightmoney" @input="handleRangeChange" />
		</view>
	</view>
</template>

<script>
	import SliderRange from '@/components/primewind-sliderrange/components/primewind-sliderrange/index.vue'
	export default {
		components:{
			SliderRange
		},
		data() {
			return {
				leftmoney: 0,
				rightmoney: 9999,

			}
		},
		methods: {
			// 滑块组件需要，不用管
			format(val) {
				return val + '%'
			},
			// 滑块组件值发生变化
			handleRangeChange(e) {
				this.$emit('handleRangeChange',[this.leftmoney || 0,this.rightmoney || 0])
			},
		}
	}
</script>

<style lang="scss">
	/* 样式在父组件中 */
	.input{
		input{
			width: 120rpx;
			line-height: 1;
			outline: none;
			border: 1rpx solid #ddd;
			border-radius: 10rpx;
			text-align: center;
			box-sizing: border-box;
		}
	}
</style>
